<template>
  <div class="home">
    <button @click="handleClick('back')">返回上一页</button>
    <button @click="handleClick('push')">跳转到parent</button>
    <button @click="handleClick('replace')">替换到parent</button>
    <b>{{ food }}</b>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  props: {
    food: {
      type: String,
      default: "apple"
    }
  },
  beforeRouteEnter (to, from, next) {
    next()
  },
  beforeRouteLeave (to, from, next) {
    const leave = confirm('您确定要离开吗？')
    if (leave) next()
    else next(false)
  },
  methods: {
    handleClick(type) {
      if (type === 'back') this.$router.back()
      else if (type === 'push') {
        const name = 'chris'
        this.$router.push({
          path: `/argu/${name}`,
          // params: {
          //   name: 'chris'
          // }
          // query: {
          //   name: 'chris'
          // }
        })
      }
      else if (type === 'replace') {
        this.$router.replace('/parent')
      }
    }
  },
}
</script>
